<template>
  <entity-view
    form-item-width="33.33%"
    @submit="submit"
    ref="form"
    :model="beanInfo"
    :rules="rules"
  >
    <div class="sub-content-flex">
      <form-item
        label="通道交易码"
        v-model="beanInfo.channelTxn"
        prop="channelTxn"
        disabled
      ></form-item>
      <form-item
        label="交易支持标志"
        v-model="beanInfo.supportFlag"
        prop="supportFlag"
         inputType="select"
        :options="supportFlagList"
        disabled
      ></form-item>
      <form-item
        label="是否支持智能路由"
        v-model="beanInfo.intelligentRouteFlag"
        prop="intelligentRouteFlag"
        inputType="radioGroup"
        :options="intelligentRouteFlagList"
        @change="value=>handleChange(value,'intelligentRouteFlag')"
      ></form-item>
      <a-form-model-item
        style="width: 100%"
        label="支持账户类型"
        prop="supportAcctType"
        :options="supportAcctTypeList"
        ref="supportAcctTypeListFormItem"
        :auto-link="false"
        @change="supportAcctTypeChange">
        <a-checkbox
          class="checkAll"
          :checked="checkAll"
          @change="onCheckAllChange"
        >全选</a-checkbox
        >
        <a-checkbox-group
          class="check-box-group"
          prop="supportAcctType"
          v-model="beanInfo.supportAcctType"
          :options="supportAcctTypeList"
          :disabled="operatorType === 'view' || operatorType === 'delete'"
          @change="supportAcctTypeChange"
        >
        </a-checkbox-group>
      </a-form-model-item>
      <form-item
        label="支付通道延时类型"
        v-model="beanInfo.txnDelayType"
        prop="txnDelayType"
        inputType="select"
        :options="txnDelayTypeList"
        @change="value=>handleChange(value,'txnDelayType')"
      ></form-item>
      <form-item
        label="交易最大并发数"
        v-model="beanInfo.maxSupportNum"
        prop="maxSupportNum"
      ></form-item>
      <form-item
        label="业务报文登记标识"
        v-model="beanInfo.msgRegisterFlag"
        prop="msgRegisterFlag"
        inputType="select"
        :options="msgRegisterFlagList"
        @change="value=>handleChange(value,'msgRegisterFlag')"
      ></form-item>
      <form-item
        label="验签标志"
        inputType="select"
        v-model="beanInfo.signFlag"
        prop="signFlag"
        :options="signFlagList"
        @change="value=>handleChange(value,'signFlag')"
      ></form-item>
      <form-item
        label="转加密标志"
        inputType="select"
        v-model="beanInfo.pinFlag"
        prop="pinFlag"
        :options="pinFlagList"
        @change="value=>handleChange(value,'pinFlag')"
      ></form-item>
      <form-item
        label="是否需要签约"
        inputType="select"
        v-model="beanInfo.needSignFlag"
        prop="needSignFlag"
        :options="needSignFlagList"
        @change="value=>handleChange(value,'needSignFlag')"
      ></form-item>
      <form-item
        label="通道交易描述"
        v-model="beanInfo.txnName"
        prop="txnName"
      ></form-item>
    </div>
    <div class="btn-wrapper">
      <a-button type="primary" html-type="submit" @click="nextOne">下一步</a-button>
      <a-button type="primary" @click="close">取消</a-button>
    </div>
  </entity-view>
</template>

<script>
import EntityView from "../../../../components/common/entityView/EntityView";
import FormItem from "../../../../components/common/entityView/FormItem";
export default {
  name: "BaseInfoForm",
  components: { EntityView, FormItem },
  inject: ["PDstChannelContext","operationContext","TradeInfoFormContext"],
  data: function () {
    return {
      pageInfo: {
        mchntType: "",
      },
      item: [],
      beanInfo: {},
      supportFlagList:[
        { value: 'Y', name: "支持" },
        { value: 'N', name: "不支持" },
      ],
       txnDelayTypeList: [
        { value: '1', name: "实时到账" },
        { value: '2', name: "普通到账" },
        { value: '3', name: "24小时到账" },
      ],
      intelligentRouteFlagList: [
      { value: "Y", label: "是" },
      { value: "N", label: "否" },
    ],
      msgRegisterFlagList: [
        { value: "Y", name: "登记" },
        { value: "N", name: "不登记" },
      ],
      signFlagList: [
        { value: "Y", name: "验签/MAC" },
        { value: "N", name: "不验签/MAC" },
      ],
      pinFlagList: [
        { value: "Y", name: "转加密" },
        { value: "N", name: "不转加密" },
      ],
      needSignFlagList: [
        { value: "Y", name: "是" },
        { value: "N", name: "否" },
      ],
      rules: {
        channelTxn: [{ required: true, message: "必填", trigger: "blur" }],
        supportFlag: [{ required: true, message: "必填", trigger: "blur" }],
        supportAcctType: [{ required: true, message: "必填", trigger: "blur" }],
        txnDelayType: [
          { required: true, message: "必填", trigger: "blur" },
        ],
        maxSupportNum: [
           { required: true, message: "必填", trigger: "blur" }
           ],
        msgRegisterFlag: [
          { required: true, message: "必填", trigger: "blur" },
        ],
        signFlag: [
          { required: true, message: "必填", trigger: "blur" },
        ],
        pinFlag: [{ required: true, message: "必填", trigger: "blur" }],
        needSignFlag: [{ required: true, message: "必填", trigger: "blur" }],
        txnName: [{ required: true, message: "必填", trigger: "blur" }],
      },
      supportAcctType: [],
      supportAcctTypeList: [],
      supportAcctTypeChecked: [],
      checkAll: false,
      operatorType:''
    };
  },
  methods: {
    async getList() {
      try {
        const res = await this.$get("/admin/igas/pDstChannelInfo/edit", {
          instId: this.PDstChannelContext.beanInfo.instId,
          dstChannelId: this.PDstChannelContext.beanInfo.dstChannelId,
          optFlag: "upd",
        });
        if (res.status === 200) {
          this.supportAcctTypeList = res.data.accTypes.filter((i) => {
            return i.value !== "*";
          });
        } else {
          this.loading = false;
          this.$message.error(res.data.message);
        }
      } catch (e) {
        console.error(e);
      }
    },
    close(){
      this.TradeInfoFormContext.modalVisible=false;
    },
    async getPageInfo(beanInfo) {
      debugger
      await this.getList();
      try {
        console.log(this.beanInfo);
        const res = await this.$get("/admin/igas/pDstTxnAuthCfg/edit", {
          dstChannelId: this.PDstChannelContext.beanInfo.dstChannelId,
          instId: this.PDstChannelContext.beanInfo.instId,
          optFlag: 'view',
          chnlOptFlag: 'view',
          channelTxn: beanInfo.channelTxn,
        });
        debugger
        this.beanInfo = res.data || {};
        if (this.beanInfo.supportAcctType=='*'){
          this.checkAll=true
        }
        this.$set(this.beanInfo, 'supportAcctType', res.data.supportAcctTypeList)
      } catch (e) {
        console.error(e);
      }
    },
    setItem(){
       this.item = this.$data;
    },
     supportAcctTypeChange(value) {
      this.indeterminate = !!value.length && value.length < this.supportAcctTypeList.length;
      this.checkAll = value.length === this.supportAcctTypeList.length;
       this.$refs.supportAcctTypeListFormItem.onFieldChange()
    },
    // onCheckAllChange(e) {
    //   Object.assign(this, {
    //     supportAcctTypeChecked: e.target.checked ? this.supportAcctTypeList : [],
    //     indeterminate: false,
    //     checkAll: e.target.checked,
    //   });
    // },
    onCheckAllChange(e) {
      if (this.checkAll == true){
        this.beanInfo.supportAcctType = [];
        this.checkAll = false;
      }else {
        for (var i in this.supportAcctTypeList){
          var supportAcctTypeData =  this.supportAcctTypeList[i].value;
          var type = true;
          for (var j in  this.beanInfo.supportAcctType){
            if ( supportAcctTypeData ==  this.beanInfo.supportAcctType[j]){
              type = false;
              break;
            }
          }
          if (type){
            this.beanInfo.supportAcctType.push(supportAcctTypeData)
          }
        }
        this.checkAll = true;
      }
    },
     handleChange(value,param) {
      this.beanInfo[param] = value;
    },
    submit() {
      this.$emit("submit", ...arguments);
    },
    resetFields() {
      return this.$refs.form.resetFields();
    },
   async nextOne(){
      const res = await this.$refs.form.validate();
      if (res) {
          this.operationContext.tabActiveKey = "timeInfo"

          const params = {};
        Object.assign(params, this.beanInfo, {
          id: this.beanInfo.id,
          supportAcctType: this.beanInfo.supportAcctType.length === this.supportAcctTypeList.length ? '*' : this.beanInfo.supportAcctType.join(','),
          optFlag: "upd",
        });
        const res = await this.$post(
          "/admin/igas/pDstTxnAuthCfg/edit",
          params
        );
        if (res.status === 200) {
          this.$message.success("保存成功！");
          return true;
        } else {
          this.$message.error(res.data.message);
          return false;
        }

      }
    },

  },
  async mounted() {
    // await this.getPageInfo();
   // await this.getList()
    this.operatorType = this.operationContext.operatorType
  //   //初始化 复选框
  //   const supportAcctType = this.beanInfo.supportAcctType;
  //   console.log(supportAcctType);
  //   const supportAcctTypeChecked = [];
  //   supportAcctType.forEach((i, index) => {
  //     this.supportAcctTypeList.forEach((j, _index) => {
  //       if (i === "Y" && index === _index) {
  //         supportAcctTypeChecked.push(j.value);
  //       }
  //     });
  //   });
  //   this.supportAcctTypeChecked = supportAcctTypeChecked;
  //   this.checkAll = supportAcctType.indexOf("*") > -1 ? true : false;
   },
};
</script>

<style scoped>
.btn-wrapper {
  padding: 0 10px;
  width: 100%;
  text-align: center;
}
.subtitle {
  width: 100%;
  font-size: 16px;
  margin-bottom: 10px;
  padding: 0 10px;
}

.sub-content-flex {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

.sub-content-block {
  display: block;
  flex-wrap: wrap;
  width: 100%;
  padding: 0 10px;
}
.checkAll {
  display: block;
  line-height: unset;
}
</style>
